<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { getQuestionListApi } from "@/request/api";
import { useI18n } from "vue-i18n";
const { t, locale } = useI18n();

const router = useRouter();
const list = ref([]);
const field_question = ref("question");

onMounted(async () => {
  if (locale.value === "en") {
    field_question.value = "questionEn";
  } else {
    field_question.value = "question";
  }
  initData();
});

const initData = () => {
  const data = {
    keyWord: "",
    page: 1,
    size: 100,
    type: "4",
  };
  getQuestionListApi(data).then((res) => {
    if (res && (res.code === 0 || res.result === "200")) {
      list.value = res.data.records;
    }
  });
};
const handleClick = (id) => {
  router.push({
    path: `/askingDetails/${id}/hand`,
  });
};
</script>

<template>
  <div class="askingList">
    <div class="title">{{ $t("consultation") }}</div>
    <div ref="outBox" class="outBox">
      <div v-if="Array.isArray(list) && list.length > 0" class="cntList">
        <div
          class="listItem"
          v-for="item in list"
          :key="item.id"
          @click="handleClick(item.id)"
        >
          <div class="text text_line_2">{{ item[field_question] }}</div>
          <van-icon class="icon" name="arrow" />
        </div>
      </div>
      <!-- <div v-else>
        <van-empty image="search" :description="$t('noData')">
          <van-button round type="primary" @click="initData">{{
            $t("refresh")
          }}</van-button>
        </van-empty>
      </div> -->
    </div>
  </div>
</template>

<style lang="less" scoped>
.askingList {
  height: 100%;
  background: url("/public/img/mobile/bg-empty.png") no-repeat bottom center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  .title {
    font-size: 32px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    @media only screen and (orientation: landscape) {
      // 横向
      display: none;
    }
  }
  .outBox {
    width: 90%;
    height: 86%;
    background: url("/public/img/exhibition-bg.png") no-repeat center center;
    -webkit-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    padding: 20px 10px 10px;
    box-sizing: border-box;
    @media only screen and (orientation: landscape) {
      // 横向
      width: calc(100vw * 0.9);
      height: calc(100vw * 0.7 * 0.625);
      margin: auto;
    }
    .cntList {
      height: 100%;
      overflow: auto;
      background: #0378de;
      padding: 10px;
      box-sizing: border-box;
      .listItem {
        width: 100%;
        font-size: 14px;
        color: #fff;
        background: linear-gradient(0deg, #3687c8 0%, #52aff5 100%);
        border: 1px solid #fff;
        border-radius: 5px;
        margin-bottom: 10px;
        padding: 6px 8px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
      }
    }
  }
}
</style>
